import { Button, Dialog } from "@taroify/core";
import { useState } from "react";
import MyInput from "./MyInput";

interface ModalInputProps {
  title: string;
  change: (v: string) => void;
  confirm: () => void;
  open: boolean;
  setOpen: (v: boolean) => void;
  placeholder?: string;
}

export default ({
  title,
  change,
  confirm,
  open,
  setOpen,
  placeholder,
}: ModalInputProps) => {
  const [value, setValue] = useState("");

  function handleChange(e) {
    change && change(e);
    setValue(e);
  }
  return (
    <Dialog open={open} onClose={setOpen}>
      <Dialog.Header>{title}</Dialog.Header>
      <Dialog.Content>
        <MyInput
          placeholder={placeholder}
          value={value}
          change={handleChange}
        />
      </Dialog.Content>
      <Dialog.Actions>
        <Button onClick={() => setOpen(false)}>取消</Button>
        <Button
          onClick={() => {
            confirm && confirm();
            setOpen(false);
            setValue("");
          }}
        >
          确认
        </Button>
      </Dialog.Actions>
    </Dialog>
  );
};
